     <template>
  <div class="knowledge container" id="knowledge">
    <yes-tabs :active.sync="activeTabName" :tab-list="tabList" @tab-click="handleClick" />
    <!-- {{getClassifyKeyArr}} -->
    <section class="knowledgeBox">
      <div class="classify"  v-show="classifyOptions">

        <el-select value-key="itemCode" v-model="fiy.val" :key="y" v-for="(fiy,y) in classifyOptions" @change="changeOpt" clearable>
          <el-option :value="fiyopt" :key="f" v-for="(fiyopt,f) in fiy.opt" :label="fiyopt.itemName" />
        </el-select>
      </div>
      <el-tabs lazy v-show="TagsGroup.length" v-model="groupTabName" class="container" @tab-click="handleGroup">
        <el-tab-pane v-for="item in TagsGroup" :key="item.groupId" :label="item.groupName" :name="item.groupId" />
      </el-tabs>

      <el-row class="cardCon" v-if="ColumnAll.length">
        <el-col :xs="24" :lg="8" :md="12" :span="12" class="cardList flex-box  pad" v-for="(oList ,o ) in ColumnAll"
          :key="o">
          <el-card class="box-card " shadow="always" :body-style="{padding:'5px  0px'}">
            <div slot="header" class="clearfix">
              <span>{{o+1}}级标签</span>
            </div>
            <div class="tagListBody toolbar" v-if="oList">
              <button v-if="oList.length" :class="'el-button el-button--default el-button--block flex-box between text item '+ (tagTreeListGId[sList.depth-1]==sList.tagsId?'actTagitem':'')"
                @click="getCateTagsFindList(sList.tagsId,0,sList)" v-for="(sList,s) in  oList" :key="s">
                <span class="knowName listDom t-left">{{sList.tagsName}}</span>
                <!-- {{tagTreeListGId[sList.depth-1]+'-'+sList.tagsId}} -->
                <div v-if="!sList.isSys&&sList.tagsId">
                  <el-button type="default" class="listDom green" @click.stop="addSelfLabel(null,sList)">修改</el-button>
                  <el-button type="default" class="listDom red" @click.stop="delColumnListSub(sList.tagsId,s,oList)">删除</el-button>
                </div>
              </button>
            </div>
            <div class="clearfix t-center mar el-card__footer padTop " style="border-top:1px solid #EBEEF5;">

              <el-button v-if="oList[0]&&oList[0].depth >1" @click="addSelfLabel(oList[0].depth -1,null,tagTreeListGId[oList[0].depth-1])"> 添加自定义标签</el-button>
              <el-button v-else @click="addSelfLabel(0,null,0)"> 添加自定义标签</el-button>
            </div>
          </el-card>
          <el-button type="primary" v-if="o<ColumnAll.length -1" class="arrowBtn" icon="el-icon-right" style="margin-left: 16px;padding:4px;"></el-button>
        </el-col>
        <el-col :xs="24" :lg="8" class="cardList flex-box  pad" :md="12" :span="12">
          <el-card class="box-card flex-box center" shadow="always" :body-style="{padding:'5px  0px'}" style="height:515px">

            <el-button type="text" class="el-icon-plus tagListBody" style="font-size:50px" @click="addSelfLabel(ColumnAll.length,null)"></el-button>
          </el-card>
        </el-col>
      </el-row>
      <div v-else class="container t-center" style="margin-top:45%"> no Data </div>
    </section>
  </div>
</template>
<script>
  import YesTabs from '@/components/YesTabs'
  import {
    cateTagsFindList,
    addCategoryTags,
    findColumnList,
    delTagsId,
    editTags,
    addColumnTags
  } from '@/api/tags'

  let id = 1000;
  export default {
    name: "createResult",
    components: {
      YesTabs
    },
    data() {
      return {
        isChangeTab: false,
        info: {

          lessonId: 0,
        },
        state: '',
        activeTabName: 'COLUMN',
        groupTabName: '',
        ColumnList: {}, //栏目列表

        tabList: [{
            label: '知识体系',
            name: 'COLUMN'
          },
          {
            label: '教研/教研报告',
            name: 'TEACHINGRESEARCH'
          },
          {
            label: '教学设计',
            name: 'PREPARELESSON',
          },
          // {
          //   label: '文章',
          //   name: 'artical'
          // },
          // {
          //   label: '资源',
          //   name: 'MATERIAL'
          // }
        ],
        lesson_list: [
        ],
        TagsGroup: {},
        ColumnAll: [],
        tagTreeIndActGId: 0,
        tagTreeListGId: [],
        ColumnAllList: {
        },

        classify: {

        },
        classifyOptions: {}
      }
    },
    created() {
      this.initData()
    },
    computed: {
      //editTagsVo 只有栏目和分类标签
      tagsTypeEnum() {
        return this.activeTabName !== 'COLUMN' ? 'CATEGORY_TAGS' : 'COLUMN_TAGS'
      },
      getClassifyKeyArr() {
        var obj = {}
        for (var k in this.classifyOptions) {
          obj[k === 'growth_classify' ? 'growthClassify' : k + 'Id'] = this.classifyOptions[k].val.itemCode
        }

        return obj
      }
    },
    watch: {
      // getClassifyKeyArr(obj){
      //   console.log(obj)
      //   //this.getCateTagesTabCon(tab.name)
      // },
      activeTabName(val, oldVal) {
        this.isChangeTab = val !== oldVal
      },
    },
    methods: {
      async initData() {
        //this.getGroup()
        this.isChangeTab = true
        this.handleClick({
          name: this.activeTabName
        })
        //标签栏目列表查询
        //this.findColumnList()
        //分类标签列表查询
      },
      //删除
      async delColumnListSub(tagsId, s, list) {
        await delTagsId({
          tagsId
        })
        list.splice(s, 1)
        //this.getCateTagsFindList(this.groupTabName ,1)
      },
      //编辑
      async editColumnListSub(item, tagsName) {
        let params = {
          tagsId: item.tagsId,
          tagsName,
          "tagsTypeEnum": this.tagsTypeEnum, //COLUMN_TAGS, CATEGORY_TAGS, CONTENT_TAG
        }
        await editTags(params)
        this.$set(item, 'tagsName', tagsName)
        // this.getCateTagsFindList(this.groupTabName ,1)
      },
      addSelfLabel(depth, item, pTagsId) {
        let that = this
        this.$prompt('请输入标签名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          inputErrorMessage: '标签不能为空',
          inputValue: item ? item.tagsName : ''
        }).then(({
          value
        }) => {
          if (!item) {
            let isNewColumn
            if (!pTagsId&&pTagsId!==0) {
              //父级id 不为0 且不存在时 为新增下一级菜单逻辑
              isNewColumn = true
              pTagsId = depth > 0 ? this.tagTreeListGId[depth - 1] : 0
            }
            if (this.activeTabName === 'COLUMN') {
              that.addColumnListSub(pTagsId, value, depth, isNewColumn)
            } else {
              that.addCategoryTags(pTagsId, value, depth, isNewColumn)
            }
          } else {
            //修改栏目或者分类标签
            that.editColumnListSub(item, value)
          }

        }).catch(() => {});
      },
      async addCategoryTags(pTagsId, tagsName, depth, isNewColumn) {
        console.log('depth', depth)
        let groupId = this.groupTabName
        let addTagsVo = {
          groupId: this.groupTabName,
          pTagsId,
          ...this.getClassifyKeyArr,
          "tagsBizEnum": this.activeTabName,
          tagsName
        }
        let res = await addCategoryTags(addTagsVo)
        this.addCanbank(res,pTagsId, tagsName, depth, isNewColumn)
      },
      addCanbank(res,pTagsId, tagsName, depth, isNewColumn){
        if (res.code === '1') {
          //添加后刷新
         var tagsId = res.data!={}?res.data:''
          if (isNewColumn) {
            var items = this.ColumnAll[this.ColumnAll.length - 1].filter(list => list.tagsId === pTagsId)[0]
            if(items){
              this.$set(items, 'sub', [{
                tagsName,
                 tagsId,
                depth: depth + 1
              }])
            }
            this.ColumnAll.push([{
              tagsName: tagsName,
              tagsId,
              depth: depth + 1
            }])
          } else {
            this.ColumnAll[depth].unshift({
              tagsName: tagsName,
              tagsId,
              depth: depth + 1
            })
          }
          this.$set(this, 'ColumnAll', this.ColumnAll)
        }
      },
      async addColumnListSub(pTagsId, tagsName, depth, isNewColumn) {
        console.log('depth', depth)
        let params = {
          pTagsId,
          ...this.getClassifyKeyArr,
          tagsName
        }
        let res = await addColumnTags(params)
        this.addCanbank(res,pTagsId, tagsName, depth, isNewColumn)

      },
      handleGroup(tab) {
        this.getCateTagsFindList(tab.name, 1)
      },
      changeTagTreeList() {

      },

      async biReturn(data) {
        var cascaderArr = this.ColumnAll
        var that = this
       // console.log("data", data)
        if (data) {
          this.$set(this.tagTreeListGId, data.depth - 1, data.tagsId)
          if (data.sub) {
            this.$set(cascaderArr, data.depth, data.sub)
            return that.biReturn(data.sub[0])
          } else {
            cascaderArr[data.depth] ? cascaderArr.splice(data.depth, 1) : ''
            cascaderArr = cascaderArr.filter((item, i) => data.depth > i)
            // cascaderArr = cascaderArr.filter((item,i)=>data.depth>=i)
            this.$set(this, 'ColumnAll', cascaderArr)
          }
        } else {
          //this.$set(this,'ColumnAll',cascaderArr)
        }
      },
      //分类栏目
      findColumnList() {
        let params = {
          ...this.getClassifyKeyArr
        }
        return findColumnList(params)
      },
      async getGroup() {

        let res = await this.$store.dispatch('app/findTagsGroup', {
          kindEnum: this.activeTabName === 'PREPARELESSON' ? 'TEACHING_DESIGN' : this.activeTabName
        })
        this.groupTabName = res[0].groupId
        this.getCateTagsFindList(res[0].groupId, 1)
        this.TagsGroup = res
      },
      //分类
      async findByParentpCateId(params) {
        if (params.bizTypeEnum === 'TEACHING_DESIGN') params.bizTypeEnum = 'PREPARELESSON'

        let data = await this.$store.dispatch('app/findByParentpCateId', params)
        if (data.categoryVoList) {
          let category = data.categoryVoList[0]
          params.pCateId = category.cateId
          //params.pCateId
          this.$set(this.classifyOptions, data.groupCode, {
            val: {},
            opt: data.categoryVoList
          })
          if (!data.categoryVoList[0].node) {
            this.findByParentpCateId(params)
          }
        }
        console.log("this.classifyOptions", this.classifyOptions)
      },
      //分类标签
      async getCateTagsFindList(groupId, isTab, item, notIndTags) {
        var data = [],
          that = this
        if (isTab) {
          //tab Click
          this.ColumnAll = []
          let res
          if (this.activeTabName === 'COLUMN') {
            res = await this.findColumnList({ ...this.getClassifyKeyArr
            })
          } else {
            let params = {
              groupId: this.groupTabName,
              ...this.getClassifyKeyArr,
              //  "growthClassify": "",
              //  "stageId": "",//学段,非必填
              //  "subjectId": "", //学科,非必填
              "tagsBizEnum": this.activeTabName === 'TEACHING_DESIGN' ? 'PREPARELESSON' : this.activeTabName
            }
            res = await cateTagsFindList(params)
          }
          //res = require('@/api/loc/tags.js').cateTagsFindList
          if (!notIndTags) {
            data = res.data[0]
            this.$set(this.tagTreeListGId, 0, res.data.length ? res.data[0].tagsId : 0)

          }
          this.$set(this.ColumnAll, 0, res.data)
          // 

        } else if (item) {
          this.$set(this.tagTreeListGId, item.depth - 1, item.tagsId)
          if (item.sub) {
            this.$set(this.tagTreeListGId, item.depth, item.sub[0].tagsId)
          }
          data = item
        }
        console.log('this.ColumnAll', this.ColumnAll, data)
        if (!notIndTags) this.biReturn(data)


      },
      changeOpt(val) {
        let params = {
          bizTypeEnum: this.activeTabName,
          pCateId: val.cateId
        }
        if (val) {
          this.findByParentpCateId(params,val)
        }
        if (this.activeTabName !== 'COLUMN' && this.getClassifyKeyArr) {
          this.getGroup()
        } else {
          this.getCateTagsFindList('', true)
        }
        // this.handleClick({name:this.activeTabName},null,val)
      },
      getColumnTabCon() {
        this.findColumnList()
      },
      getCateTagesTabCon(bizTypeEnum) {
        this.findByParentpCateId({
          bizTypeEnum
        })
        this.getGroup()
      },
      handleClick(tab, e, pCateId) {
        console.log(tab.name, e)
        if (this.isChangeTab || !e) {
          this.activeTabName = tab.name
          switch (tab.name) {
            case 'TEACHINGRESEARCH':
              this.getCateTagesTabCon(tab.name)
              break;
            case 'PREPARELESSON':
              this.getCateTagesTabCon(tab.name)
              break;
            case 'COLUMN':
              //this.getCateTagesTabCon(tab.name)
              if (!pCateId) this.findByParentpCateId({
                bizTypeEnum: 'COLUMN'
              })
              this.getCateTagsFindList('', true) //请求栏目接口
            default:
              this.classifyOptions = {}
              this.TagsGroup = []
          }
        }
      }
    }
  }
</script>
<style lang="scss">
  .knowledge {
  }
</style>
<style lang="scss" scoped>
  $bg:#2EB06F;
  $gray:#E6F5ED;
  $textColr-2:rgba(0, 0, 0, .45);

  .knowledge {
    .knowledgeBox {
      .actTagitem {
        color: #299E64 !important;
      }

      padding:20px 0;

      .classify {
        padding: 15px 0;

        .el-select {
          margin: 5px 10px;
        }

      }

      .cardList {
        .box-card {
          width: calc(100% - 24px);
          min-width: 240px;
        }

        .tagListBody,
          {
          height: 380px;

          >div {
            padding: 5px 10px;
          }
        }

        .el-card__footer {}
      }

      .actTagitem {
        color: #2EB06F;
        border-color: #c0e7d4;
        background-color: #eaf7f1;
      }

      .listDom {

        padding: 8px;
      }

      .knowName {
        width: 250px;
      }
    }

  }
</style>
